<template>
  <div data-spm="fx" class="cbd-backtop" data-v-aeb87fa6>
    <div @click="toTop"
      data-spm-acode="3010"
      class="fixed-back-top fixed index"
      style
      data-v-aeb87fa6
      data-spm-data="1"
    >
      <i class="icon i-ic_top" data-v-aeb87fa6></i>
    </div>
    <div @click="toNextFloor"
      data-spm-acode="3012"
      class="fixed-next fixed next-little"
      style
      data-v-aeb87fa6
      data-spm-data="2"
    >
      <i class="icon i-to-next" data-v-aeb87fa6></i>
      <i class="icon i-next-block" style="display: none;" data-v-aeb87fa6></i>
    </div>
    <!---->
    <div
      data-spm-acode="3011"
      class="fixed-setto-desktop fixed new index"
      data-v-aeb87fa6
      data-spm-data="3"
    >
      <i class="icon i-add-to-desktop" data-v-aeb87fa6></i>
    </div>
    <!---->
  </div>
</template>

<script>
import '../../assets/css/appCss/appAside.css'
import $ from "jquery";

export default {
  data() {
    return {
      floorIndex:0
    };
  },
  methods: {
    handleScroll() {
        // window.console.log($(window).scrollTop());
        if($(window).scrollTop()<400){
          this.floorIndex=0;
        }
      },
    toTop(){
       $('body,html').animate({ scrollTop: 0 }, 500);
       this.floorIndex=0;
            return false;
    }
    ,toNextFloor(){
      this.floorIndex++;
      
      if(this.floorIndex>=11){
        this.floorIndex=11;
      }
      switch(this.floorIndex){
        case 1:
          $('body,html').animate({ scrollTop: 400 }, 500);
          break;
        case 2:
          $('body,html').animate({ scrollTop: 1350 }, 500);
          break;
        case 3:
          $('body,html').animate({ scrollTop: 1800 }, 500);
          break;
        case 4:
          $('body,html').animate({ scrollTop: 2400 }, 500);
          break;
        case 5:
          $('body,html').animate({ scrollTop: 2950}, 500);
          break;
        case 6:
          $('body,html').animate({ scrollTop: 3550}, 500);
          break;
        case 7:
          $('body,html').animate({ scrollTop: 3870}, 500);
          break;
        case 8:
          $('body,html').animate({ scrollTop: 4280}, 500);
          break;
        case 9:
          $('body,html').animate({ scrollTop: 4800}, 500);
          break;
        case 10:
          $('body,html').animate({ scrollTop: 5400}, 500);
          break;
        case 11:
          $('body,html').animate({ scrollTop: 5950}, 500);
          break;
      }
    }
  },
  computed: {},
  watch: {},
  created() {}
  ,
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    this.floorIndex=0;
  }
  ,
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
